<template>
<el-main>
        <div class="block">
          <el-carousel indicator-position="none" height="300px">
            <el-carousel-item v-for="item in imgs" :key="item">
              <h3 class="blockpic">
                <img :src="item.src" />
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="menu">
          <el-row :gutter="0">
            <el-col :span="16"
              ><div class="grid-content ">
                <el-row :gutter="20">
                  <el-col :span="2"
                    ><div class="grid-content ">全部</div></el-col
                  >
                  <el-col :span="2"
                    ><div class="grid-content ">图片</div></el-col
                  >
                  <el-col :span="2"
                    ><div class="grid-content ">音频</div></el-col
                  >
                  <el-col :span="2"
                    ><div class="grid-content ">视频</div></el-col
                  >
                  <el-col :span="2"
                    ><div class="grid-content ">文本</div></el-col
                  >
                  <el-col :span="2"
                    ><div class="grid-content ">其他</div></el-col
                  >
                </el-row>
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content " align="right">
                <el-button type="primary">综合</el-button>
              </div></el-col
            >
          </el-row>
        </div>

        <div class="products" >
          
          <div v-for="pro in pros" class="product" :key="pro">
            <!--点击图片传出参数-->
            <img :src="pro.pimg" height="200px" width="200px" @click="gtproinfo(pro.pid,pro.pname)"/>
            <br />
            <p>姓名：{{ pro.pname }}</p>
            <p>价格：{{ pro.price }}</p>
            
          </div>
        </div>

        <div class="pagination">
          <el-pagination class="mypagination" background layout="prev, pager, next" :total="100">
          </el-pagination>
        </div>
      </el-main>
</template>

<script>
export default {
  name: "Mall",
  data() {
    return {
      imgs: [
        { src: require("@/assets/block1.png") },
        { src: require("@/assets/block2.png") },
        { src: require("@/assets/block3.jpeg") },
        { src: require("@/assets/block4.png") },
      ],
      pros: [
        {
          tp_id: 1,
          pid: 10011,
          pname: "name1",
          price: 1000,
          pimg: "../../static/p1.jpg",
        },
        {
          tp_id: 2,
          pid: 10022,
          pname: "name2",
          price: 2000,
          pimg: "../../static/p2.jpg",
        },
        {
          tp_id: 3,
          pid: 10033,
          pname: "name3",
          price: 3000,
          pimg: "../../static/p3.jpg",
        },
        {
          tp_id: 4,
          pid: 10044,
          pname: "name4",
          price: 4000,
          pimg: "../../static/p4.jpg",
        },
        {
          tp_id: 5,
          pid: 10055,
          pname: "name5",
          price: 5000,
          pimg: "../../static/p5.jpg",
        },
        {
          tp_id: 6,
          pid: 10066,
          pname: "name6",
          price: 6000,
          pimg: "../../static/p6.jpg",
        },
        {
          tp_id: 7,
          pid: 10077,
          pname: "name7",
          price: 7000,
          pimg: "../../static/p7.jpg",
        },
        {
          tp_id: 8,
          pid: 10088,
          pname: "name8",
          price: 8000,
          pimg: "../../static/p8.jpg",
        },
        {
          tp_id: 9,
          pid: 10099,
          pname: "name9",
          price: 9000,
          pimg: "../../static/p9.jpg",
        },
        {
          tp_id: 10,
          pid: 10100,
          pname: "name10",
          price: 1000,
          pimg: "../../static/p10.jpg",
        },
        {
          tp_id: 11,
          pid: 10110,
          pname: "name4",
          price: 1100,
          pimg: "../../static/p11.jpg",
        },
        {
          tp_id: 12,
          pid: 10120,
          pname: "name4",
          price: 1200,
          pimg: "../../static/p12.jpg",
        },
      ],
    };
  },
  methods:{
    gtproinfo(pid,pname){
      this.$router.push("/details/"+pid+'/'+pname)
    }
    
  }
};
</script>

<style scoped>
.blockpic{
  height:100%;
  width:auto;
  object-fit:contain;

}
.products{
   display: flex;
   margin: 0px 20px 0px 20px;
   flex-wrap: wrap;
   justify-content: space-around;
   
}
.product {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 5px;
  padding: 20px 20px 5px 20px;
  border:#333 ;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
}
.menu {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 50px;
  margin-right: 60px;
  text-align: center;
  white-space: nowrap;
  line-height: 40px;
}
.pagination{
  margin-top: 40px;
  margin-bottom: 20px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  /*line-height: 360px;*/
  padding: 0px 0px 10px 0px;
  position: relative;
  margin: 30px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>